export default {
  data() {
    return {
      // 预警值设置
      markLine: [],
      listArr: [],
      dataLists: [],
      pieces: [],
      firstDataTime: null,
      collectionTime: null,
      firstData: true,
    }
  },
  mounted() {
    this.initEcharts()
    window.addEventListener('resize', this.echartResize)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.echartResize)
  },
  methods: {

    initEcharts() {
      var that = this
      if (this.charts) {
        this.charts.dispose()
        this.charts = undefined
      }
      const Echarts = require('echarts')
      this.charts = Echarts.init(this.$el, null, {locale: 'ZH'})
      this.charts.on('click', params => {
        // 关闭tip提示
        this.charts.dispatchAction({type: 'hideTip'})
        if (that.dataLists.length !== 0) {
          if (that.dataLists.recordList[0].xAxis) {
            this.$emit('showRemarkDailog1', params, that.dataLists)
          }

        } else {
          this.$emit('showRemarkDailog', params.data)

        }
      })
      this.charts.on('mouseout', params => {
        // 关闭tip提示
        this.charts.dispatchAction({type: 'hideTip'})
      })
      // this.$nextTick(()=>{
      //   this.charts.showLoading({
      //     text:'久感科技为你服务', //显示的文本
      //     color:'#c23531', //显示转圈的圆圈颜色
      //     textCloor: '#000', //显示文本的颜色
      //     maskColor:'rgba(255,255,255,0.8)', //显示的背景色
      //     // 字体大小。从 `v4.8.0` 开始支持。
      //     fontSize: 32,
      //     // 是否显示旋转动画（spinner）。从 `v4.8.0` 开始支持。
      //     showSpinner: true,
      //     // 旋转动画（spinner）的半径。从 `v4.8.0` 开始支持。
      //     spinnerRadius:14,
      //     // 旋转动画（spinner）的线宽。从 `v4.8.0` 开始支持。
      //     lineWidth:5,
      //     // 字体粗细。从 `v5.0.1` 开始支持。
      //     fontWeight:'normal',
      //     // 字体风格。从 `v5.0.1` 开始支持。
      //     fontStyle: 'normal',
      //     // 字体系列。从 `v5.0.1` 开始支持。
      //     fontFamily: 'sans-serif'
      //   })
      //
      // })
    },
    gradeColor(val) {
      switch (val) {
        case 1:
          return "#0DC26B";
        case 2:
          return "#0073b7";
        case 3:
          return "#f39c12";
        case 4:
          return "#ff851b";
        case 5:
          return "#e43321";
        default:
          return "#0DC26B";
      }
    },
    // // 老版设置预警值
    // setWarningLine(list) {
    //   let arr = JSON.parse(JSON.stringify(list))
    //   //预警线添加反方向
    //   list.map(x => {
    //     x.threshold = -x.threshold
    //     arr.push(x)
    //   })
    //   this.markLine = arr.map(x => {
    //     const color = this.gradeColor(x.warningLevelName)
    //     return {
    //       name: 'markLine',
    //       lineStyle: {
    //         color: color,
    //         width: 1
    //       },
    //       yAxis: x.threshold,
    //       label: {
    //         normal: {
    //           show: true,
    //           position: 'end',
    //           formatter: x.warningLevelName
    //         }
    //       }
    //     }
    //   })
    //   console.log( this.markLine)
    //
    // },

    // 新版设置预警值
    setWarningLine2(list) {
      let arr = JSON.parse(JSON.stringify(list)) || []
      let pieces = []
      for (let i = 0; i < arr.length; i++) {
        const color = this.gradeColor(arr[i].warningLevel)
        let p = {
          color: color
        }
        //正常
        if (arr[i].warningLevel === 1) {
          p.gt = arr[i].threshold
          p.lte = arr[i + 1].threshold
          //4级预警
        } else if (arr[i].warningLevel === 5) {
          if (arr[i].threshold > 0) {
            p.gt = arr[i].threshold
          } else {
            p.lte = arr[i].threshold
          }
          //正数 2-4级预警
        } else if (arr[i].threshold > 0) {
          p.gt = arr[i].threshold
          p.lte = arr[i + 1].threshold
        } //负数 2-4级预警
        else if (arr[i].threshold < 0) {
          if (i === 5) {
            pieces.push({
              color: this.gradeColor(arr[0].warningLevel),
              gt: arr[i].threshold,
              lte: arr[0].threshold
            })
          }
          p.gt = arr[i + 1].threshold
          p.lte = arr[i].threshold
        }
        pieces.push(p)
      }
      this.pieces = pieces
      this.charts.setOption(this.options, true)
    },
    setWarningLine(list) {
      return
      let arr = JSON.parse(JSON.stringify(list))
      this.listArr = arr
      this.markLine = this.listArr.map(x => {
        const color = this.gradeColor(x.warningLevel)
        return {
          name: 'markLine',
          lineStyle: {
            color: color,
            width: 1
          },
          yAxis: x.threshold,
          label: {
            normal: {
              textBorderColor: color,
              textBorderWidth: 3,
              show: true,
              color: '#ffffff',
              position: 'insideEndTop',
              formatter: x.warningLevelName
            }
          }
        }
      })
      this.charts.setOption(this.options, true)
    },
    // echart随着窗口改变
    echartResize() {
      this.charts.resize()
    },
    // 加入换行
    sliceStr(val, length = 12) {
      let strs = val.split('') // 字符串数组
      let str = ''
      // eslint-disable-next-line no-cond-assign
      for (let i = 0, s; s = strs[i++];) { // 遍历字符串数组
        str += s
        if (!(i % 12)) str += '<br/>' // 按需要求余
      }
      return str
    },
    // 数据格式化转换
    formatParams(row, key) {
      return {
        value: row[key],
        dataId: row.id,
        remark: row.remark,
        _time: row.createTime
      }
    }
  }
}
